<template>
    <div>
		<myheader></myheader>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas="datas"></Breadcrumb>

		
	<section class="featured-block text-center">
		<div v-width="300">
			<AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete>
		</div>
		<div class="container"> 
			<table border="1">
				<tr>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品图片</th>
					<th>商品描述</th>
					<th>商品规格</th>
				</tr>
				<tr v-for="(item,index) in goodslist" :key="index">
					<td><a :href="'/item/?gid='+item.id" target="_blank">{{item.name}}</a></td>
					<td>{{item.price}}</td>
					<td><img :src="'http://localhost:8000/static/upload/'+item.img" height="100px" width="120px"></td>
					<td>{{item.desc}}</td>
					<td>
						颜色：{{color}}
						<br>
						款式：{{season}}
					</td>
				</tr>
			</table>
		</div>
	</section>
		<myfooter></myfooter>
    </div>
</template>


<script>
import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};


import myheader from './myheader'
import myfooter from './myfooter'
export default {
	name:"reg",
	components:{
		'myheader':myheader,
		'myfooter':myfooter,
	},
    data () {
    return {
		datas:[{title:'首页',route:{name:'index'}},
				{title:"商品检索页面"}
				],
		word:'',
		goodslist:[],
		//只能提示控件
		value: '',
        param: {
			orgId: 1, // 自定义参数传递
			loadData,
			minWord: 1,
        },
    }
    },
    mounted:function(){
		// 接收参数
		//接收参数
		var word = this.$route.query.word;
		this.word = word
		// console.log(this.word)
    
	   //请求后台接口
	//    router.push自动检测，如果在跳转页面了，就不跳转了
	if (this.word != "") {
		
		this.axios.get('http://localhost:8000/goodssearch/',{params:{word:this.word}}).then((result) =>{
			console.log(result)
            this.goodslist = result.data
            for (let index = 0; index < result.data.length; index++) {
                    var parms = result.data[index].parms
                    parms = JSON.parse(parms)
			        this.color = parms.color
                    this.season = parms.season
			}
			if (this.goodslist.length == 0) {
				this.$Message("对不起，暂时没有您搜索的商品")
			}
		});
	}
	},
	methods:{
		submit(){
			this.axios({
				url:'http://127.0.0.1:8000/reg/',
				params:{
					username:this.username,
					password:this.password,
					code:this.code
				},
			}).then(resp=>{
				this.$Message(resp.data.message)
			}).catch(error=>{
			})
		},
		//关键词变更
		onChange(data, trigger) {
			console.log(data, trigger);
    	},
	},
	//监听属性
	watch: {
		$route(to,from){
			this.$router.go(0)
		}

	},
}


</script>


<style>
	td{padding: 5px;}


</style>